<template>
  <div>
    <!-- {{activeIndex}} -->
    <el-menu ref="menu"
      :default-active="activeIndex"
      router
      collapse-transition
      @select="onClickActive"
      @open="navClick"
      class="el-menu-vertical-demo"
      :unique-opened="true"
      style="border: none;min-height:100%;"
      text-color="gray"
      active-text-color="#ffd04b">
      <div v-for="(item) in menuData" :key="item.path">
        <!--如果有子元素就el-submenu-->
        <el-submenu :index="item.path" v-if="item.children">
          <template slot="title">
            <i v-if="item.meta.icon" class="el-icon-location"></i>
            <span>{{item.meta.title}}</span>
          </template>
          <div v-for="(child) in item.children" :key="child.path" ref="hiddenBox">
            <el-menu-item
              :index="child.path"
            >{{child.meta.title}}</el-menu-item>
          </div>
        </el-submenu>
        <!--如果没有子元素就走下面结构-->
        <el-menu-item v-else :index="item.path" @click="onTeshu(item.path)">
          a
          <i class="el-icon-menu"></i>
          <span slot="title">{{item.meta.title}}</span>
        </el-menu-item>
      </div>
    </el-menu>
  </div>
</template>
<script>
import {check} from '../../src/utils/auth'
export default {
  data(){
    //this.$router.options.routes 可以拿到路由参数
    this.selectedKeysMap={} //左侧路由地址都放对象里
    const menuData = this.getMenuData(this.$router.options.routes);
    return{
      isCollapse:true,
      menuData,
      closeIndex:'',
      activeIndex:this.selectedKeysMap[this.$route.path],
    }
  },
  watch:{
    '$route.path':function(val){
      this.activeIndex=this.activeIndex?this.activeIndex:this.selectedKeysMap[val]
    },
  },
  
  created(){
    if (window.performance.navigation.type == 1) {
      this.activeIndex=localStorage.getItem('navActive')?localStorage.getItem('navActive'):this.activeIndex
    }
  },
  methods:{
    getMenuData(routes = [], parentKeys = [], selectedKey) {
      const menuData = [];
      for (let item of routes) {
        if (item.meta && item.meta.authority && !check(item.meta.authority)) {
          continue;
        }
        
        if (item.name && !item.hideInMenu) {
          this.selectedKeysMap[item.path] = selectedKey || item.path;
          const newItem = { ...item };
          delete newItem.children;
          if (item.children && !item.hideChildrenInMenu) {
            newItem.children = this.getMenuData(item.children, [
              ...parentKeys,
              item.path
            ]);
          } else {
            this.getMenuData(
              item.children,
              selectedKey ? parentKeys : [...parentKeys, item.path],
              selectedKey || item.path
            );
          }
          menuData.push(newItem);
        } else if (
          !item.hideInMenu &&
          !item.hideChildrenInMenu &&
          item.children
        ) {
          menuData.push(
            ...this.getMenuData(item.children, [...parentKeys, item.path])
          );
        }
      }

      return menuData;
    },
    navClick(index) {
      this.closeIndex=index
    },
    onClickActive(index){
      // console.log('click'+index)
      this.activeIndex=index
      //把点击父子导航选中的存起来，方便再次刷新页面使用
      localStorage.setItem('navActive',index)
    },
    onTeshu(){
      // console.log(this.closeIndex)
      this.$refs.menu.close(this.closeIndex)
    }
  },
  
}
</script>
<style lang="less" scoped>
.el-menu{height:100vh;}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  background: rgba(5, 2, 2, 0.08);
}
 
/deep/ .el-menu-vertical-demo .el-submenu__title:focus,
/deep/ .el-menu-vertical-demo .el-submenu__title:hover{
    background: rgba(255, 255, 255, 0.05);
  }

  .el-menu-item:focus, .el-menu-item:hover{
    background: rgba(255, 255, 255, 0.05);
  }
</style>